<template>
  <van-dialog
    :show="show"
    :title="lang.ins_dialog_title"
    destroyOnClose
    className="custom-dialog"
    :showConfirmButton="false"
    :showCancelButton="true"
    @cancel="beforeClose"
  >
    <div class="content-container">
      <!-- 问题识别部分 -->
      <div class="section">
        <h3 class="section-title">{{ lang.problem_identified }}</h3>
        <p class="section-content">{{ lang.withdrawal_condition }}</p>
      </div>

      <!-- 投注说明部分 -->
      <div class="section">
        <h3 class="section-title">{{ lang.betting_instructions }}</h3>
        <p class="section-content">{{ lang.account_balance_withdrawal }}</p>
      </div>

      <!-- VIP提现限制部分 -->
      <div class="section">
        <h3 class="section-title">{{ lang.vip_withdrawal_limit }}</h3>
        <p class="section-content">{{ lang.vip_benefits }}</p>
      </div>
    </div>
  </van-dialog>
</template>

<script setup lang="ts">
const lang: any = getCurrentPageLang("carteira");

defineProps(["show"]);

const emit = defineEmits(["changeInsDialog"]);

const beforeClose = () => {
  emit("changeInsDialog", false);
};
</script>

<style lang="scss" scoped>
.content-container {
  position: relative;
  padding: 0.3rem 0.2rem;
  width: 100%;
  border-radius: 0.2rem;
  background: var(--theme-card-background);
  box-sizing: border-box;
}

.section {
  margin-bottom: 0.4rem;

  &:last-child {
    margin-bottom: 0;
  }
}

.section-title {
  margin-bottom: 0.2rem;
  font-size: 0.32rem;
  font-weight: 800;
  color: var(--theme-neutral1);
  line-height: 1.4;
}

.section-content {
  margin-bottom: 0.2rem;
  font-size: 0.32rem;
  color: var(--theme-neutral1);
  line-height: 0.44rem;
  white-space: pre-wrap;
  text-align: justify;

  &:last-child {
    margin-bottom: 0;
  }
}
</style>
